﻿<div class="row">
    <div class="col-lg-12 col-sm-12 col-xs-12">
    </div>
</div>
<div class="easy-pie-chart-preview">
    <div class="row">
        <div class="col-lg-12 col-sm-12 col-xs-12">
            <div class="row">
                <div class="col-lg-3 col-sm-6 col-xs-12">
                    <div class="well">
                        <div class="header bg-blue">Default Chart</div>
                        <div class="easyPieChart" ui-jq="easyPieChart" ui-options="{ percent: 65, barColor:'#6f85bf'}">65%</div>
                        <div class="footer"><code>data-percent="65"</code></div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 col-xs-12">
                    <div class="well">
                        <div class="header bg-yellow">With Track Color</div>
                        <div class="easyPieChart" ui-jq="easyPieChart" ui-options="{ percent: 73, lineWidth: 10, barColor:'#ed4e2a', trackColor: '#fff1a8'}">73%</div>
                        <div class="footer"><code>data-trackcolor="#fff1a8"</code></div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 col-xs-12">
                    <div class="well">
                        <div class="header bg-pink">With Scale</div>
                        <div class="easyPieChart" ui-jq="easyPieChart" ui-options="{ percent: 25, lineWidth: 5, barColor:'#fb3c4a', scaleColor:'#C2C2C2' }"><span class="danger font-80">25%</span></div>
                        <div class="footer"><code>data-scalecolor="#c2c2c2"</code></div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 col-xs-12">
                    <div class="well">
                        <div class="header bg-darkorange">Rounded</div>
                        <div class="easyPieChart" ui-jq="easyPieChart" ui-options="{ percent: 55, lineWidth: 10, barColor:'#fbcb43', lineCap: 'round' }">55%</div>
                        <div class="footer"><code>data-linecap="round/butt/square"</code></div>
                    </div>
                </div>
            </div>
            <div class="horizontal-space"></div>
            <div class="row">
                <div class="col-lg-3 col-sm-6 col-xs-12">
                    <div class="well">
                        <div class="header bg-palegreen">With Animation</div>
                        <div class="easyPieChart" ui-jq="easyPieChart" ui-options="{ percent: 80, lineWidth: 10, barColor:'#65b045', size: 130, animate:1000 }">80%</div>
                        <div class="footer"><code>data-animate="1000"</code></div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 col-xs-12">
                    <div class="well">
                        <div class="header bg-blueberry">Big Pie</div>
                        <div class="easyPieChart" ui-jq="easyPieChart" ui-options="{ percent: 50, lineWidth: 10, barColor:'#11a9cc', size: 150, lineCap: 'butt', animate: 1000 }">50%</div>
                        <div class="footer"><code>data-size="150"</code></div>
                    </div>
                </div>
                <div class="col-lg-3 col-sm-6 col-xs-12">
                    <div class="well bg-darkpink">
                        <div class="header bg-darkpink">Colors and Size</div>
                        <div class="easyPieChart" ui-jq="easyPieChart" ui-options="{ percent: 70, lineWidth: 5, barColor:'#fff', size: 150, lineCap: 'butt', animate: 500 }"><span class="white">70%</span></div>
                        <div class="footer"><code>data-barcolor="#fff"</code></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>